<script setup lang="js">
import * as echarts from "echarts"
import { ref, reactive, watch, onMounted, watchEffect } from 'vue'

const props = defineProps({
  value: Object,
  isShowUnit: null
})
const emit = defineEmits(['emitChartParams'])

const shuang_zhu_tu = ref(null)

const unit = ref('')
const options = reactive({
  id: '',
  title: {
    text: '',
    top: '',
    left: '40px',
    show: true,
    color: '#fff',
    fontSize: '30px'
  },
  grid: {
    left: "2%",
    right: "15%",
    top: "3%",
    bottom: "5%",
    // y 轴 分类名称 全部显示
    containLabel: true
  },
  legend: {
    bottom: -5,
    right: 20,
    textStyle: {
      color: '#fff'
    }
  },
  // 提示
  tooltip: {
    trigger: "axis",
    show: false,
    type: 'cross'
  },
  xAxis: {
    type: "value",
    boundaryGap: [0, 0.01],
    data: [],
    name: '',
    splitLine: false,
    nameTextStyle: {
      color: "#fff",
      nameLocation: "start",
    },
    axisLabel: {
      show: false,
      color: "#fff",
      fontSize: 20
    }
  },
  yAxis: {
    type: "category",
    data: [],
    axisLabel: {
      show: true,
      color: "#fff",
      fontSize: 15,
      fontWeight: '500'
      // rotate: -45
    },
  },
  series: [
    {
      data: [],
      type: "bar",
      barWidth: 5,
      barGap: "2",
      barCategoryGap: "100%",
      color: '#4af5e7',
      itemStyle: {
        // 渐变色
        color: new echarts.graphic.LinearGradient(0, 1, 1, 0,
          [
            {
              offset: 0,
              color: "#f09449" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#eee" // 100% 处的颜色
            }
          ],
          false
        ),
        shadowColor: "rgba(0,160,221,1)",
        //模糊细数
        // shadowBlur: 2,
        // 圆角
        // barBorderRadius: [0, 8, 8, 0]
      },
      emphasis: {
        focus: 'series'
      },
      // 标签
      label: {
        show: true,
        position: "right",
        distance: 10,
        fontSize: 16,
        color: '#fff',
        fontWeight: 600,
        formatter: function (params) {
          return `{span|${params.value}}`
        },
        rich: {
          span: {
            color: '#fff',
            fontSize: '14px',
            fontWeight: '500',
            fontFamily: '',
            letterSpacing: '10px'
          }
        }
      }
    },
    {
      data: [],
      type: "bar",
      barWidth: 5,
      barGap: "2",
      barCategoryGap: "100%",
      color: '#fff',
      itemStyle: {
        // 渐变色
        color: new echarts.graphic.LinearGradient(0, 1, 1, 0,
          [
            {
              offset: 0,
              color: "#4af5e7" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#c1fdf8" // 100% 处的颜色
            }
          ],
          false
        ),
        shadowColor: "rgba(0,160,221,1)",
        //模糊细数
        // shadowBlur: 2,
        // 圆角
        // barBorderRadius: [0, 8, 8, 0]
      },
      emphasis: {
        focus: 'series'
      },
      // 标签
      label: {
        show: true,
        position: "right",
        distance: 10,
        fontSize: 16,
        color: '#fff',
        fontWeight: 600,
        formatter: function (params) {
          return `{span|${params.value}}`
        },
        rich: {
          span: {
            color: '#fff',
            fontSize: '14px',
            fontWeight: '500',
            fontFamily: '',
            letterSpacing: '4px'
          }
        }
      },
    }
  ]
})

watch(() => props.value,
  (newVal, oldVal) => {
    unit.value = newVal.unit
    options.id = newVal.data1.name

    options.yAxis.data = newVal.x
    options.series[0].name = newVal.data1.name
    options.series[0].data = newVal.data1.data

    options.series[1].name = newVal.data2.name
    options.series[1].data = newVal.data2.data

    initChart()
  },
  {
    deep: true,
  }
)

onMounted(() => {

})

function initChart() {
  let chart = echarts.init(shuang_zhu_tu.value);

  chart.on('click', params => {
    clickChart(params)
  })

  chart.setOption(options)
  // window.onresize = shuang_zhu_tu.resize;
}

function clickChart(params) {
  emit('emitChartParams', params.data)
}
</script>

<template>
  <div class="box">
    <div id="chart" ref="shuang_zhu_tu" @click="clickChart"></div>

    <span class="unit" v-if="isShowUnit">单位: {{ unit }}</span>
  </div>
</template>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
}

#chart {
  width: 100%;
  height: 100%;
}

.unit {
  position: absolute;
  left: 10px;
  bottom: 0px;
  color: #fff;
  font-size: 14px;
}

.s {
  color: #f09449;
}
</style>